<template>
  <div class="screen overview page-content">
    <screen-header :title="banner.name" :is-home="true"></screen-header>
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="6" class="ibox-group">
          <div class="ibox box1-1">
            <div class="ibox-header">
              <span class="ibox-title cursor" @click="turnPage(3)">派工维修监控</span>
            </div>
            <div class="ibox-body">
              <img src="../assets/images/chart-images/over1_1.png" alt="">
            </div>
          </div>
          <div class="ibox box1-2">
            <div class="ibox-header">
              <span class="ibox-title cursor" @click="turnPage(1)">中央运输量监控</span>
            </div>
            <div class="ibox-body">
              <img src="../assets/images/chart-images/over1_2.png" alt="">
            </div>
          </div>
          <div class="ibox box1-3">
            <div class="ibox-header">
              <span class="ibox-title">用户反馈分析</span>
            </div>
            <div class="ibox-body">
              <img src="../assets/images/chart-images/over1_3.png" alt="">
            </div>
          </div>
        </el-col>
        <el-col :span="12" class="ibox-group">
          <div class="ibox box2-1">
            <div class="horizontal-overview">
              <div>
                <h4 class="num">
                  <animate-number v-if="overData.data0" from="0" :to="overData.data0" :duration="1000"
                    easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                </h4>
                <p>服务人员总数</p>
              </div>
              <div>
                <h4 class="num">
                  <animate-number v-if="overData.data1" from="0" :to="overData.data1" :duration="1000"
                    easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                </h4>
                <p>近7日新增用户</p>
              </div>
              <div>
                <h4 class="num">
                  <animate-number v-if="overData.data2" from="0" :to="overData.data2" :duration="1000"
                    easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                </h4>
                <p>近7日活跃用户</p>
              </div>
              <div>
                <h4 class="num">
                  <animate-number v-if="overData.data3" from="0" :to="overData.data3" :duration="1000"
                    easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                </h4>
                <p>今日订单总数</p>
              </div>
              <div>
                <h4 class="num">
                  <animate-number v-if="overData.data4" from="0" :to="overData.data4" :duration="1000"
                    easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                  <small style="margin-left: -0.4vw;">%</small>
                </h4>
                <p>今日任务完成度</p>
              </div>
            </div>
            <div class="ibox-body">
              <img src="../assets/images/chart-images/over2_1.png" alt="">
            </div>
          </div>
          <div class="ibox box2-2 bgh2">
            <div class="ibox-header">
              <span class="ibox-title">服务器运行状态</span>
            </div>
            <div class="ibox-body text-center" style="padding-top: 0;">
              <img src="../assets/images/chart-images/over2_2.png" alt="">
            </div>
          </div>
          <div class="fx-box">
            <div class="ibox box2-3" style="width: 40%;margin-right: 2vh;">
              <div class="ibox-header">
                <span class="ibox-title">车辆运营监控</span>
              </div>
              <div class="ibox-body text-center">
                <img src="../assets/images/chart-images/over2_31.png" alt="">
              </div>
            </div>
            <div class="ibox box2-4 fx-1">
              <div class="ibox-header">
                <span class="ibox-title cursor" @click="turnPage(2)">线上商城服务</span>
              </div>
              <div class="ibox-body text-center">
                <img src="../assets/images/chart-images/over2_32.png" alt="">
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="ibox-group">
          <div class="ibox box3-1">
            <div class="ibox-header">
              <span class="ibox-title">陪诊陪检（本月）</span>
            </div>
            <div class="ibox-body">
              <img src="../assets/images/chart-images/over3_1.png" alt="">
            </div>
          </div>
          <div class="ibox box3-2">
            <div class="ibox-header">
              <span class="ibox-title">陪护服务（本月）</span>
            </div>
            <div class="ibox-body">
              <img src="../assets/images/chart-images/over3_2.png" alt="">
            </div>
          </div>
          <div class="ibox box3-3">
            <div class="ibox-header">
              <span class="ibox-title">病员档案分析</span>
            </div>
            <div class="ibox-body">
              <img src="../assets/images/chart-images/over3_3.png" alt="">
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import charts from "@/utils/charts";
export default {
  props: {
    banner: {
      type: Object,
      default: () => { return {} },
    },
    current: {
      type: Object,
      default: () => { return {} },
    },
  },
  components: {},
  data() {
    return {
      timer: null,
      overData: {},
    };
  },
  watch: {
    current() {
      if (this.current.id == this.banner.id) {
        this.overData = {};
        this.initData();
      }
    }
  },
  mounted() {
    // this.initData();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    turnPage(index, name) {
      this.$emit("change", index);
    },
    initData() {
      setTimeout(() => {
        this.overData = {
          data0: 2063,
          data1: 50,
          data2: 1053,
          data3: 103,
          data4: 90,
        };
      }, 100)
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  position: relative;

  .box1-1 {
    height: 29vh;
  }

  .box1-2 {
    height: 29vh;
  }

  .box1-3 {
    height: 27vh;
  }

  .box2-1 {
    height: 40vh;
    display: flex;

    .horizontal-overview {
      height: 7.5vh;
      padding: 0vh 1vw 0;
      flex-shrink: 0;
      margin-top: 1.5vh;

      &>div {
        padding-top: 1.2vh;
      }

      .num {
        font-size: 2.8vh;
      }

      p {
        font-size: 0.7vw;
      }
    }
  }

  .box2-2 {
    height: 18vh;
  }

  .box2-3 {
    height: 27vh;
  }

  .box2-4 {
    height: 27vh;
  }

  .box3-1 {
    height: 29vh;
  }

  .box3-2 {
    height: 29vh;
  }

  .box3-3 {
    height: 27vh;
  }
}
</style>